// 贪吃蛇游戏主页面交互脚本

$(document).ready(function() {
    // 导航栏滚动效果
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.navbar').addClass('navbar-scrolled');
        } else {
            $('.navbar').removeClass('navbar-scrolled');
        }
    });

    // 平滑滚动
    $('a[href*="#"]').on('click', function(e) {
        e.preventDefault();
        
        var target = this.hash;
        var $target = $(target);
        
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - 70
        }, 800, 'swing', function() {
            window.location.hash = target;
        });
    });

    // 游戏模式卡片点击效果
    $('.mode-card').on('click', function() {
        var $this = $(this);
        var gameMode = $this.find('.btn').attr('href');
        
        // 添加点击动画
        $this.addClass('clicked');
        setTimeout(function() {
            $this.removeClass('clicked');
        }, 300);
        
        // 模拟加载效果
        showLoadingAnimation();
        
        // 延迟跳转，让用户看到动画效果
        setTimeout(function() {
            window.location.href = gameMode;
        }, 1000);
    });

    // 键盘按键效果
    $('.key-icon').on('click', function() {
        var $this = $(this);
        $this.addClass('key-press');
        setTimeout(function() {
            $this.removeClass('key-press');
        }, 200);
    });

    // 页面加载动画
    function initPageAnimations() {
        // 使用自定义CSS动画替代Animate.css
        // 动画效果已在CSS中通过.fade-in-up类实现
        
        // 游戏模式卡片动画
        setTimeout(function() {
            $('.mode-card').each(function(index) {
                $(this).css('animation-delay', (index * 0.2) + 's');
            });
        }, 500);
    }

    // 加载动画
    function showLoadingAnimation() {
        var loadingHtml = `
            <div class="loading-overlay">
                <div class="loading-content">
                    <div class="spinner-border text-warning" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-3 text-white">正在加载游戏...</p>
                </div>
            </div>
        `;
        
        $('body').append(loadingHtml);
        
        // 添加淡入效果
        setTimeout(function() {
            $('.loading-overlay').addClass('show');
        }, 10);
    }

    // 移除加载动画
    function hideLoadingAnimation() {
        $('.loading-overlay').removeClass('show');
        setTimeout(function() {
            $('.loading-overlay').remove();
        }, 300);
    }

    // 视差滚动效果
    function initParallax() {
        $(window).scroll(function() {
            var scrolled = $(window).scrollTop();
            $('.snake-preview').css('transform', 'translateY(' + (scrolled * 0.5) + 'px)');
        });
    }

    // 页面性能优化
    function optimizePerformance() {
        // 延迟加载非关键资源
        $(window).on('load', function() {
            // 预加载游戏页面
            preloadGamePages();
        });
    }

    // 预加载游戏页面
    function preloadGamePages() {
        var gamePages = [
            './pages/game.html?mode=classic',
            './pages/game.html?mode=adventure',
            './pages/game.html?mode=versus',
            './pages/game.html?mode=boss'
        ];
        
        gamePages.forEach(function(url) {
            var link = document.createElement('link');
            link.rel = 'prefetch';
            link.href = url;
            document.head.appendChild(link);
        });
    }

    // 键盘快捷键
    $(document).on('keydown', function(e) {
        // 数字键1-4快速选择游戏模式
        if (e.key >= '1' && e.key <= '4') {
            var modeIndex = parseInt(e.key) - 1;
            var $modeCard = $('.mode-card').eq(modeIndex);
            if ($modeCard.length) {
                $modeCard.find('.btn').trigger('click');
            }
        }
        
        // ESC键返回首页
        if (e.key === 'Escape') {
            $('html, body').animate({
                scrollTop: 0
            }, 500);
        }
    });

    // 移动端触摸优化
    function initTouchEvents() {
        // 防止双击缩放
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function(event) {
            var now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
        
        // 触摸反馈
        $('.mode-card, .btn, .key-icon').on('touchstart', function() {
            $(this).addClass('touch-active');
        }).on('touchend', function() {
            $(this).removeClass('touch-active');
        });
    }

    // 初始化所有功能
    function init() {
        initPageAnimations();
        initParallax();
        initTouchEvents();
        optimizePerformance();
        
        // 页面加载完成后的回调
        $(window).on('load', function() {
            // 添加加载完成动画
            $('body').addClass('loaded');
            
            // 显示欢迎消息
            showWelcomeMessage();
        });
    }

    // 显示欢迎消息
    function showWelcomeMessage() {
        var welcomeHtml = `
            <div class="alert alert-success alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3" role="alert" style="z-index: 1050;">
                <i class="bi bi-emoji-smile me-2"></i>
                欢迎来到贪吃蛇多模式游戏！
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        $('body').append(welcomeHtml);
        
        // 3秒后自动关闭
        setTimeout(function() {
            $('.alert').alert('close');
        }, 3000);
    }

    // 启动初始化
    init();
});

// 添加额外的CSS类
$(document).ready(function() {
    // 导航栏滚动样式
    var style = document.createElement('style');
    style.textContent = `
        .navbar-scrolled {
            background: rgba(40, 167, 69, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }
        
        .mode-card.clicked {
            transform: scale(0.95) !important;
        }
        
        .key-press {
            transform: scale(0.9) !important;
            background: #198754 !important;
        }
        
        .touch-active {
            opacity: 0.7;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .loading-overlay.show {
            opacity: 1;
        }
        
        .loading-content {
            text-align: center;
        }
        
        body.loaded .hero-section {
            animation: none;
        }
        
        @media (max-width: 768px) {
            .navbar-scrolled {
                padding: 0.5rem 0;
            }
        }
    `;
    document.head.appendChild(style);
});